<template>
    <div class="tabs is-layout-top" :class="[alignClass, typeClass, sizeClass, layoutClass, fullWidthClass]">
        <ul class="tab-list c-def">
            <li v-for="(tab, index) in changeItems" class="c-def"
                :class="[{ 'is-active': isActive(index), 'is-disabled': tab.disabled}]"
                @click.prevent="handleSelect(index,tab.toroute,tab.menueCodes)"
                role="tab">
                <a class="c-def">
                    <!--<span class="icon" :class="[{'is-small': size !== 'large'}]" v-if="tab.icon"><i class="fa" :class="[`fa-${tab.icon}`]"></i></span>-->
                    <div class="tab-border-c">
                        <span class="c-def">{{ tab.label }}</span>
                        <i class="el-icon-circle-close c-def" style="color: #a4a4a4" @click.stop="handleClose(index)" :index='index'
                                                                      v-if="index > 0"></i>
                    </div>


                </a>

            </li>
        </ul>

        <div class="tab-content is-flex">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    import * as type from '../../../store/types';
    import {mapState} from 'vuex'

    export default {

        props: {
            isFullWidth: Boolean,
            layout: {
                type: String,
                default: 'top',
                validator(val) {
                    return ['top', 'bottom', 'left', 'right'].indexOf(val) > -1;
                },
            },
            type: {
                type: String,
                default: '',
            },
            size: {
                type: String,
                default: '',
            },
            alignment: {
                type: String,
                default: '',
            },
            activeIndex: {
                type: Number,
                default: 0,
            },
            animation: {
                type: String,
                default: 'fade',
            },
            onlyFade: {
                type: Boolean,
                default: true,
            },
            onTabClick: {
                type: Function,
                default() {
                },
            },

            transition: {
                type: String,
                default: 'fade',
            },
        },

        data() {
            return {
                tabPanes: [],
                selectedIndex: 0,
                prevSelectedIndex: -1,
                showClose: true,
                delClose: true
            };
        },

        watch: {
            activeIndex(val) {
                this.selectedIndex = val;
            },
            cactivityCurrentIndex(){

            }
        },
        computed: {
            alignClass() {
                return this.alignment ? `is-${this.alignment}` : null;
            },
            typeClass() {
                return this.type ? `is-${this.type}` : null;
            },
            sizeClass() {
                return this.size ? `is-${this.size}` : null;
            },
            layoutClass() {
                return this.layout ? `is-layout-${this.layout}` : null;
            },
            fullWidthClass() {
                return this.isFullWidth ? 'is-fullwidth' : null;
            },
            changeItems(){
                let a = this.$store.state.titles.length - 1;//触发属性计算
                this.tabPanes = this.$children.filter(child => child.isTabPane);
                let size = this.tabPanes.length;
                this.selectedIndex = a;

                return this.$children;
            },
            cactivityCurrentIndex(){
                console.log("computed")
                // alert(this.selectedIndex)
                this.selectedIndex = this.$store.state.curentActivityIndex;
                //return this.selectedIndex;
                let self = this
                console.log(this.selectedIndex)
                if (this.$store.state.categoryDelete) {
                    self.handleClose(self.selectedIndex)
                    this.$store.commit(type.CATEGORY_DELETE, '');
                }
            }
        },

        methods: {
            isActive(index) {
                return index === this.selectedIndex;
            },
            handleSelect(index, toRoute, menueCodes) {
                console.log(index, toRoute, menueCodes);
//                if (this.prevSelectedIndex !== -1) {
//                    let tapPan = this.$children[this.selectedIndex];
//                    tapPan.deActivated();
//                }
//                console.log('?????????????????????????????????')
//                console.log(this.$store.state.titles)
                if (index) {
                    if (this.$store.state.titles[index].id != undefined) {
                        this.$store.commit(type.CATEGORY_ID_CHANGE, this.$store.state.titles[index]);
                    }
                }
                this.prevSelectedIndex = this.selectedIndex;
                this.selectedIndex = index;
                this.$store.commit(type.TITLES_ACTIVITY, index);//更改容器中的状态以便及时更改

                if (this.$children[index] == undefined) {
                    return Promise.reject("当前元素不存在");
                } else {
                    // this.$children[index].onActivated(index, this.prevSelectedIndex);
                }
                this.$router.replace({
                    path: toRoute,
                    // query: {redirect: this.$router.currentRoute.fullPath}
                });
                if (menueCodes != undefined) {
                    this.$store.commit(type.REF_CURRENT_MENU, menueCodes);
                }
                this.onTabClick(index);
            },
            routeGo: function (toRout, title) {
                if (toRout == undefined) {
                    console.log("并没有配置路由")
                } else {//路由到指定页面
//                    console.log(111);

                    this.$store.commit(type.TITLES_ADD, {title: title, index: toRout});

                    //判断是否已经打开
                    let titles = this.$store.state.titles;
                    console.log(titles);
                    for (let i = 0; i < titles.length; i++) {
                        let _title = titles[i].title;
                        if (_title == title) {//如果有已经打开的就激活当前标签页面
                            this.$store.commit(type.TITLES_ACTIVITY, i);
                            break;
                        }
                    }
                    this.$router.replace({
                        path: toRout,
                        query: {redirect: this.$router.currentRoute.fullPath}
                    });

                }
            },
            handleClose(a) {
                if (this.$store.state.titles.length > 1) {
                    this.$store.commit(type.TITLES_REMOVE, a);
                    let x = this.$store.state.titles[this.$store.state.titles.length - 1];
//                    this.handleSelect(this.$store.state.titles.length - 1, x.index, x.menueCodes)
                    if (x.id) {
                        this.$store.commit(type.CATEGORY_ID_CHANGE, x);
                    }
                    if (x.menueCodes != undefined) {
                        this.$store.commit(type.REF_CURRENT_MENU, x.menueCodes);
                    }
                    this.routeGo(x.index, x.title);

                }
            }
        },

        beforeMount () {
            this.tabPanes = this.$children.filter(child => child.isTabPane);
            this.handleSelect(this.activedIndex, "/welcome", "首页").catch(err => {
                console.log(err);
            });
            this.routeGo("/welcome", "首页");
        }

    }
</script>
<style>
    .tab-list {
        margin-left: 2em;
        margin-top: 3px;
    }

    .tab-list li {
        position: relative;
        margin-left: 6px;
    }

    .el-icon-circle-close {
        /*position: absolute;
        width: 14px;
        height: 14px;
        line-height: 14px;
        top: -2px;
        right: -2px;
        font-size: 12px;
        text-align: center;*/
        margin-left: 3px;
        font-size: 12px;
    }
    .c-def{
        cursor: default;
    }
</style>
